<template>
  <div class="common-layout">
    <el-container>
      <common-aside />
      <el-container>
        <common-header />
        <common-tag />
        <el-main>
            <router-view />
        </el-main>
        <el-footer>3号楼804男团出品</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import CommonHeader from "@/components/CommonHeader.vue";
import CommonAside from "@/components/CommonAside.vue";
import CommonTag from "@/components/CommonTag.vue";

</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
  background: linear-gradient(135deg, #a8edea, #fed6e3);

  > .el-container {
    height: 100%;

    .el-aside {
      height: 100vh;
      background-color: #001529;  // 深色侧边栏
      border-right: none;
    }
    .el-header {
      background: #fff;
      padding: 0 24px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .el-main {
      //background: #f5f7fa;
      padding: 24px;
      //min-height: calc(100vh - 112px); // header+footer 高度
    }
    .el-footer {
      //background: #fff;

      color: #999;
      border-top: 1px solid #e8e8e8;
      //padding: 12px 0;

      display: flex;
      align-items: center;   /* 垂直（上下）居中 */
      justify-content: center;/* 可选：水平居中 */
      font-size: 14px;
      font-weight: 400;
    }
  }
}
</style>
